<template>
	<!-- 我的页面 -->
	<view class="content">
		<!-- 顶部个人信息区域 -->
		<view class="top">
			<view class="li1">
				<!-- <navigator url="../Userdetails/Userdetails" open-type="navigate" class="login">
					<!-- <image src="../../static/img/logo.png" mode="widthFix"></image> -->
				<image :src="$store.state.gTitle.pic" mode="widthFix"></image>
				</navigator> -->
				<view class="Sign_in">
					<navigator url="../Sign/Sign" open-type="navigate">登录</navigator>
					<text>/</text>
					<navigator url="../register/register" open-type="navigate">注册</navigator>
				</view>
				<view class="name Sign_in">
					邢帅兵
				</view>
			</view>
			<view class="li2">
				<view class="li">
					<view class="p">0</view>
					<view class="span">优惠卷</view>
				</view>
				<view class="li">
					<view class="p">0</view>
					<view class="span">积分</view>
				</view>
				<view class="li">
					<view class="p">0</view>
					<view class="span">余额</view>
				</view>
			</view>
			<view class="li3">
				<image class="left" src="../../static/img/gold.png" mode="widthFix"></image>
				<view class="conter">

				</view>
				<navigator url="../member/member" class="right">立即开通</navigator>
			</view>
		</view>
		<!-- 顶部个人信息区域 -->


		<!-- 主体选项 -->
		<view class="bottom">
			<view class="li_top">
				<view class="te_top">
					<view class="h3">我的订单</view>
					<view class="span">
						<text>全部订单</text>
						<image src="../../static/img/right.png" mode=""></image>
					</view>
				</view>
				<view class="bottom">
					<view class="li">
						<view class="top_img">
							<image src="../../static/img/toPay.png" mode="widthFix"></image>
						</view>
						<view class="text_botm">待支付</view>
					</view>
					<view class="li">
						<view class="top_img">
							<image src="../../static/img/toPush.png" mode="widthFix"></image>
						</view>
						<view class="text_botm">待发货</view>
					</view>
					<view class="li">
						<view class="top_img">
							<image src="../../static/img/toHave.png" mode="widthFix"></image>
						</view>
						<view class="text_botm">待收货</view>
					</view>
					<view class="li">
						<view class="top_img">
							<image src="../../static/img/have.png" mode="widthFix"></image>
						</view>
						<view class="text_botm">已发货</view>
					</view>
					<view class="li">
						<view class="top_img">
							<image src="../../static/img/after.png" mode="widthFix"></image>
						</view>
						<view class="text_botm">退款/售后</view>
					</view>
				</view>
			</view>
			<view class="li_conter">
				<view class="li">
					<view class="top_img">
						<image src="../../static/img/member.png" mode="widthFix"></image>
					</view>
					<view class="text_botm">汪汪会员</view>
				</view>
				<view class="li">
					<view class="top_img">
						<image src="../../static/img/integral.png" mode="widthFix"></image>
					</view>
					<view class="text_botm">积分商城</view>
				</view>
				<view class="li">
					<view class="top_img">
						<image src="../../static/img/ceo-share.png" mode="widthFix"></image>
					</view>
					<view class="text_botm">推广店铺</view>
				</view>
				<view class="li">
					<view class="top_img">
						<image src="../../static/img/vip.png" mode="widthFix"></image>
					</view>
					<view class="text_botm">汪礼卡</view>
				</view>
			</view>
			<view class="li_bottom">
				<view class="li">
					<view class="top_img">
						<image src="../../static/img/collection.png" mode="widthFix"></image>
					</view>
					<view class="text_botm">我的收藏</view>
				</view>
				<view class="li">
					<view class="top_img">
						<image src="../../static/img/address.png" mode="widthFix"></image>
					</view>
					<view class="text_botm">我的地址</view>
				</view>
				<view class="li">
					<view class="top_img">
						<image src="../../static/img/invoice.png" mode="widthFix"></image>
					</view>
					<view class="text_botm">我的发票</view>
				</view>
				<view class="li">
					<view class="top_img">
						<image src="../../static/img/customer.png" mode="widthFix"></image>
					</view>
					<view class="text_botm">联系客服</view>
				</view>
				<view class="li">
					<view class="top_img">
						<image src="../../static/img/question.png" mode="widthFix"></image>
					</view>
					<view class="text_botm">常见问题</view>
				</view>
				<view class="li">
					<view class="top_img">
						<image src="../../static/img/set.png" mode="widthFix"></image>
					</view>
					<view class="text_botm">系统设置</view>
				</view>
				<view class="li">
					<view class="top_img">
						<image src="../../static/img/commission.png" mode="widthFix"></image>
					</view>
					<view class="text_botm">业绩提成</view>
				</view>
				<view class="li">

				</view>
			</view>
		</view>
		<!-- 主体选项 -->



		<!-- 底部备案 -->
		<view class="keeprecord">
			<text>版权所有 沪ICP备15010261号-2</text>
		</view>
		<!-- 底部备案 -->

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {},
		methods: {

		}
	}
</script>

<style lang="less">
	.content {
		width: 100vw;
		height: 100vh;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		// justify-content: center;
		background-color: #f7f7f7;
		padding-bottom: 100rpx;


		//顶部个人信息区域 
		.top {
			width: 100vw;
			height: 480rpx;
			background-image: url("../../static/img/bg.png");
			background-position: center;
			background-size: cover;
			display: inline-block;
			margin-bottom: 60rpx;

			.li1 {
				display: flex;
				align-items: center;
				margin-top: 100rpx;
				margin-left: 50rpx;

				.login {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.Sign_in {
					display: flex;
					height: 40rpx;
					margin-left: 30rpx;
					font-size: 38rpx;
					color: #fff;

					text {
						margin: 0 10rpx;
					}
				}
			}

			.li2 {
				margin-top: 40rpx;
				display: flex;
				justify-content: space-evenly;

				.li {
					text-align: center;
					color: #fff;

					.p {
						line-height: 1.8;
						font-size: 40rpx;
					}

					.span {
						font-size: 25rpx;
					}
				}
			}

			.li3 {
				position: relative;
				bottom: -50rpx;
				left: 50%;
				z-index: 999;
				transform: translateX(-50%);
				width: 94vw;
				height: 110rpx;
				border-radius: 30rpx;
				overflow: hidden;
				background-color: pink;
				background-image: url("../../static/img/cardBg.png");
				background-position: center;
				background-size: cover;
				display: flex;
				align-items: center;
				padding: 0 40rpx;
				box-sizing: border-box;

				.left {
					width: 140rpx;
				}

				.conter {
					width: 40%;
				}

				.right {
					display: inline-block;
					text-align: center;
					font-size: 30rpx;
					width: 180rpx;
					height: 60rpx;
					line-height: 60rpx;
					font-size: 30rpx;
					border-radius: 30rpx;
					background-color: #eed08e;
					color: #4e391f;

				}
			}
		}

		//顶部个人信息区域


		// 主体选项
		.bottom {
			>view {
				width: 94vw;
				margin: 0 auto;
				padding: 20rpx;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 20rpx;
				overflow: hidden;
			}

			.li_top {
				box-sizing: border-box;

				.te_top {
					display: flex;
					justify-content: space-between;

					.h3 {
						font-weight: 900;
						font-size: 31rpx;
					}

					.span {
						display: flex;
						align-items: center;
						font-size: 27rpx;
						color: #a2a2a2;

						image {
							width: 19rpx;
							height: 28rpx;
							margin-left: 10rpx;
						}
					}
				}

				.bottom {
					width: 98vw;
					margin-top: 20rpx;
					display: flex;
					margin-left: -40rpx;

					.li {
						width: 220rpx;
						display: flex;
						flex-wrap: wrap;
						justify-content: center;

						.top_img {
							image {
								width: 50rpx;
								height: 50rpx;
							}
						}

						.text_botm {
							margin-top: 10rpx;
							font-size: 25rpx;
						}
					}
				}
			}

			.li_conter {
				margin: 30rpx auto;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 30rpx 20rpx;

				.li {
					width: 140rpx;
					text-align: center;

					.top_img {
						text-align: center;

						image {
							width: 50rpx;
							height: 50rpx;
						}
					}

					.text_botm {
						margin-top: 10rpx;
						font-size: 25rpx;
					}
				}
			}

			.li_bottom {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				padding: 30rpx 20rpx;
				padding-bottom: 0;

				.li {
					width: 140rpx;
					text-align: center;
					margin-bottom: 30rpx;

					.top_img {
						text-align: center;

						image {
							width: 50rpx;
							height: 50rpx;
						}
					}

					.text_botm {
						margin-top: 10rpx;
						font-size: 25rpx;
					}
				}
			}
		}

		// 主体选项


		// 底部备案
		.keeprecord {
			width: 100vw;
			height: 40rpx;
			margin: 0rpx auto;
			text-align: center;
			line-height: 4;
			font-size: 26rpx;
		}

		// 底部备案
	}
</style>
